<template>
    <div class="body_box">
        <!-- app-container -->
        <div class="head">

            <div class="head_column">
                <div style="font-size: 15px;">路线名称：{{ date.name }}</div>
                <div style="font-size: 14px; padding-top: 30px;display: flex;flex-direction: row;">标签：<dict-tag :options="statusList" :value="date.label" />
                </div>
                <div style="font-size: 14px; padding-top: 30px;">发布时间：{{ date.createTime }}
                </div>
            </div>
        </div>
        <div class="listBox">

            <el-table ref="table" v-loading="loading" :data="routesList" stripe border>
                <el-table-column label="顺序" align="center" width="100px">
                    <template slot-scope="scope">
                        <div v-if="scope.$index == 0">起点</div>
                        <div v-else-if="scope.$index > 0 && scope.$index < routesList.length - 1">途经点</div>
                        <div v-else>终点</div>
                    </template>
                </el-table-column>
                <el-table-column label="地点名称" align="center" prop="routesName" :show-overflow-tooltip="true" >

                </el-table-column>
                <el-table-column label="地址" align="center" prop="routesAddress" :show-overflow-tooltip="true" />
            </el-table>

        </div>
    </div>
</template>
<script>
import {
    getWorksDetails
} from "@/api/setting/works";
export default {
    data() {
        return {
            loading: false,
            //表格数据
            routesList: [],
            statusList: [],
            date: {
                name: '',
                createTime: '',
                label: '',
                routesList: []
            },

        }
    },
    created() {
        this.id = this.$route.query.id;
        this.getInfo()
    },
    methods: {
        getInfo() {
            this.loading = true;
            getWorksDetails(this.id).then((response) => {
                this.date = response.result
                this.date.routesList.forEach(item => {
                    for (var key in item) {
                        if (item[key] === '') {
                            item[key] = "-";
                        }
                    }
                });
                this.routesList = this.date.routesList
                this.loading = false;
                this.getSelectList()
            });
        },
        getSelectList() {
            //获取使用状态、支付状态字典
            var dictType = "douyin_video_talent_works_label";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.statusList = res.result[0].dictList;
                })
                .finally(() => {
                });
        },
    },
};

</script>
<style scoped scoped lang="scss">
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none;
}

.body_box {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
}

.head_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 20px;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}
</style>
  